<template>
    <div class="common-title-box">
        {{ props.list?.length }}
        <template v-for="(item, index) in props.list" :key="item">
            <div v-if="+index !== 0" class="title-icon">
                <el-icon><ArrowRight /></el-icon>
            </div>
            <SCLink v-if="item?.url || item?.routeName" class="sub-title" @click="jumpTo(item)">
                {{ item?.name ? item.name : item }}
            </SCLink>
            <div v-else class="sub-title">
                {{ item?.name ? item.name : item }}
            </div>
        </template>
    </div>
</template>

<script setup lang="ts">
import { ArrowRight } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";

const props = defineProps({
    list: {
        type: Object,
        required: true,
    },
    separatorIcon: {
        default: ArrowRight,
    },
});
const router = useRouter();
const jumpTo = (item: any) => {
    if (item?.url) {
        router.push(item?.url);
        return;
    }
    if (item?.routeName) {
        router.push({
            name: item?.routeName,
            params: item?.params || {},
        });
        return;
    }
};
</script>

<style lang="scss" scoped>
.common-title-box {
    margin-bottom: 20px;
    font-size: 0;
    .sub-title {
        display: inline-block;
        font-size: 14px;
        color: rgba(27, 24, 27, 0.7);
        cursor: pointer;
        &:nth-last-child(1) {
            font-size: 20px;
            font-weight: 500;
            color: #1b181b;
            margin-right: 0px;
            cursor: auto;
        }
    }
    :deep(.sc-link) {
        vertical-align: baseline;
    }
    .title-icon {
        font-size: 14px;
        display: inline-block;
        margin: 0 6px;
    }
}
</style>
